<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>

<!DOCTYPE html>
<html lang="zh-CN">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>书音影管理系统</title>
<!-- 引入Bootstrap 4 CSS -->
<link
	href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
	rel="stylesheet">
<style>
/* 自定义样式 */
body {
	padding-top: 56px;
	/* 用于修复固定导航栏时内容顶部被遮挡的问题 */
}

.navbar-custom {
	background-color: #007bff;
	color: #ffffff;
	/* 导航栏背景颜色 */
}

.navbar-custom .navbar-brand, .navbar-custom .navbar-nav .nav-link {
	color: #ffffff;
	/* 导航栏文字颜色 */
}

.navbar-custom .nav-item:hover {
	background-color: #0056b3;
	/* 鼠标悬停时的底色 */
}

.nav-item:hover .nav-link {
	color: #ffffff;
	/* 鼠标悬停时的文字颜色 */
}
</style>
</head>

<body>

	<!-- 导航栏 -->
	<nav
		class="navbar navbar-expand-lg navbar-dark bg-primary fixed-top navbar-custom">
		<a class="navbar-brand" href="#">书影音评论系统</a>
		<button class="navbar-toggler" type="button" data-toggle="collapse"
			data-target="#navbarNav" aria-controls="navbarNav"
			aria-expanded="false" aria-label="Toggle navigation">
			<span class="navbar-toggler-icon"></span>
		</button>
		<div class="collapse navbar-collapse" id="navbarNav">
			<ul class="navbar-nav">
				<li class="nav-item"><a class="nav-link"
					href="<c:url value="/manager/home"/>">首页</a></li>
				<li class="nav-item"><a class="nav-link"
					href="<c:url value="/manager/user"/>">用户管理</a></li>
				<li class="nav-item"><a class="nav-link"
					href="<c:url value="/manager/media"/>">书影音管理</a></li>
				<li class="nav-item"><a class="nav-link"
					href="<c:url value="/manager/comment"/>">评论管理</a></li>
			</ul>
			<c:if test="${not empty user }">
				<span class="navbar-text welcome-message ml-auto"> 欢迎您，<c:out
						value="${user.username }" />
				</span>
			</c:if>

		</div>
	</nav>

	<div class="container mt-4">
		<h2>书影音列表</h2>
		<hr />
		<!-- 表格展示所有图书 -->
		<div class="container">
			<div class="row justify-content-between">
				<div class="col-auto">
					<button type="button" class="btn btn-primary mb-3"
						data-toggle="modal" data-target="#addModal" style="margin: auto">添加书影音</button>
				</div>
				<div class="col-auto">
					<form class="form-inline my-2 my-lg-0" method="POST"
						action="<c:url value='searchMedia'/>">
						<div class="input-group">
							<input class="form-control" type="search" name="title"
								placeholder="搜索书影音..." aria-label="搜索">
							<div class="input-group-append">
								<button class="btn btn-outline-primary" type="submit">搜索</button>
							</div>
						</div>
					</form>
				</div>
			</div>
		</div>


		<table class="table">
			<thead>
				<tr>
					<th>ID</th>
					<th>类型</th>
					<th>书名/影视名/歌名</th>
					<th>作者/导演/歌手</th>
					<th>标签</th>
					<th>操作</th>
				</tr>
			</thead>
			<tbody>
				<c:forEach var="media" items="${mediaList}">
					<tr>
						<td>${media.id}</td>
						<td>${media.type }</td>
						<td>${media.title}</td>
						<td>${media.author}</td>
						<td>${media.tag }</td>
						<td>
							<!-- 编辑用户按钮触发模态框 --> <c:if test="${not empty mediaList}">
								<!-- 进入详情查看按钮 -->
								<!-- <button class="btn btn-primary btn-sm">详情</button> -->
								<button type="button" class="btn btn-warning btn-sm"
									data-toggle="modal" data-target="#editModal${media.id}">
									修改</button>
								<!-- 删除media按钮 -->
								<button type="button" class="btn btn-danger btn-sm"
									data-toggle="modal" data-target="#deleteModal${media.id}">删除</button>
							</c:if>
						</td>
					</tr>
					<!-- 更多用户行... -->
				</c:forEach>
			</tbody>
		</table>
		<!-- 分页 -->
		<div class="fixed-bottom" style="bottom: 50px">
			<nav>
				<ul class="pagination justify-content-center">
					<li class="page-item ${page == 1 ? 'disabled' : ''}"><a
						class="page-link" href="?page=${page - 1}" tabindex="-1"
						aria-disabled="${page == 1}">上一页</a></li>
					<c:forEach begin="1" end="${pageCount}" var="pageNum">
						<c:set var="active" value="${pageNum == page ? 'active' : ''}" />

						<li class="page-item ${active}"><c:url var="pageUrl"
								value="?page=${pageNum}">
								<c:if test="${not empty title}">
									<c:param name="title" value="${title}" />
								</c:if>
							</c:url><a class="page-link" href="${pageUrl}">${pageNum}</a></li>
					</c:forEach>
					<li class="page-item ${page == pageCount ? 'disabled' : ''}"><a
						class="page-link" href="?page=${page + 1}">下一页</a></li>
				</ul>
			</nav>
		</div>

		<!-- 页脚 -->
		<footer class="text-center py-3 fixed-bottom navbar-custom">
			&copy; 2023 书影音 </footer>

		<!-- 添加图书的弹窗 -->
		<div class="modal" id="addModal" tabindex="-1" role="dialog"
			aria-labelledby="addModalLabel" aria-hidden="true">
			<div class="modal-dialog" role="document">
				<div class="modal-content">
					<div class="modal-header">
						<h5 class="modal-title" id="addModalLabel">添加书影音</h5>
						<button type="button" class="close" data-dismiss="modal"
							aria-label="Close">
							<span aria-hidden="true">&times;</span>
						</button>
					</div>
					<div class="modal-body">
						<form action="<c:url value=" addMedia" />" method="post" id="add">
							<!-- 选择添加类型 -->
							<div class="form-group">
								<label for="addItemType">选择添加类型</label> <select
									class="form-control" id="addItemType" name="addItemType">
									<option value="Book">图书</option>
									<option value="Movie">影视</option>
									<option value="Music">音乐</option>
								</select>
							</div>
							<!-- 添加书影音的内容 -->
							<div class="form-group">
								<label for="addBookTitle">书名/影视名/歌名</label> <input type="text"
									class="form-control" id="addBookTitle" name="addBookTitle"
									placeholder="输入书名/影视名/歌名">
							</div>
							<div class="form-group">
								<label for="addBookAuthor">作者/导演/歌手</label> <input type="text"
									class="form-control" id="addBookAuthor" name="addBookAuthor"
									placeholder="作者/导演/歌手名">
							</div>
							<div class="form-group">
								<label for="addReleaseDate">发行日期</label> <input type="date"
									class="form-control" id="addReleaseDate" name="addReleaseDate"
									placeholder="输入发行日期">
							</div>
							<div class="form-group">
								<label for="addTag">标签</label> <select class="form-control"
									id="addTag" name="addTag">
									<option value="Action">Action</option>
									<option value="Pop">Pop</option>
									<option value="Fantasy">Fantasy</option>
									<option value="Comedy">Comedy</option>
									<option value="Mystery">Mystery</option>
									<option value="Rock">Rock</option>
									<option value="Thriller">Thriller</option>
								</select>
							</div>

							<div class="form-group">
								<label for="addDescription">描述</label>
								<textarea class="form-control" id="addDescription"
									name="addDescription" rows="3" placeholder="输入描述"></textarea>
							</div>
							<!-- 添加链接的表项 -->
							<div class="form-group">
								<label for="addLink">链接</label> <input type="text"
									class="form-control" id="addLink" name="addLink"
									placeholder="输入链接">
							</div>
							<div class="modal-footer">
								<button type="button" class="btn btn-secondary"
									data-dismiss="modal">取消</button>
								<!-- 确认添加按钮 -->
								<button type="submit" class="btn btn-success">确认添加</button>
							</div>
						</form>

					</div>

				</div>
			</div>
		</div>


		<!-- 修改图书的弹窗 -->
		<c:forEach var="media" items="${mediaList}">
			<div class="modal" id="editModal${media.id}" tabindex="-1"
				role="dialog" aria-labelledby="editModalLabel" aria-hidden="true">
				<div class="modal-dialog" role="document">
					<div class="modal-content">
						<div class="modal-header">
							<h5 class="modal-title" id="editModalLabel">修改图书信息</h5>
							<button type="button" class="close" data-dismiss="modal"
								aria-label="Close">
								<span aria-hidden="true">&times;</span>
							</button>
						</div>
						<div class="modal-body">
							<form action="<c:url value=" editMedia" />" method="post">
								<!-- 修改图书的内容 -->
								<!-- mediaID，以便在提交时识别media -->
								<input type="hidden" name="mediaId" value="${media.id}">
								<div class="form-group">
									<label for="editBookTitle">书名/影视名/歌名</label> <input type="text"
										class="form-control" id="editBookTitle" name="editBookTitle"
										required placeholder="输入书名">
								</div>
								<div class="form-group">
									<label for="editBookAuthor">作者/导演/歌手</label> <input type="text"
										class="form-control" id="editBookAuthor" name="editBookAuthor"
										required placeholder="输入作者名">
								</div>
								<div class="form-group">
									<label for="editReleaseDate">发行日期</label> <input type="date"
										class="form-control" id="editReleaseDate"
										name="editReleaseDate" required placeholder="输入发行日期">
								</div>
								<div class="form-group">
									<label for="editBookTag">标签</label> <select
										class="form-control" id="editBookTag" name="editBookTag"
										required>
										<option value="Action">Action</option>
										<option value="Pop">Pop</option>
										<option value="Fantasy">Fantasy</option>
										<option value="Comedy">Comedy</option>
										<option value="Mystery">Mystery</option>
										<option value="Rock">Rock</option>
										<option value="Thriller">Thriller</option>
									</select>
								</div>

								<div class="form-group">
									<label for="editDescription">描述</label>
									<textarea class="form-control" id="editDescription"
										name="editDescription" required rows="3" placeholder="输入描述"></textarea>
								</div>
								<!-- 添加链接的表项 -->
								<div class="form-group">
									<label for="editLink">链接</label> <input type="text"
										class="form-control" id="editLink" name="editLink"
										placeholder="输入链接">
								</div>
								<div class="modal-footer">
									<button type="button" class="btn btn-secondary"
										data-dismiss="modal">取消</button>
									<!-- 确认修改按钮 -->
									<button type="submit" class="btn btn-primary">确认修改</button>
								</div>
							</form>
						</div>
					</div>
				</div>
			</div>
		</c:forEach>


		<!-- 删除图书的弹窗 -->
		<c:forEach var="media" items="${mediaList}">
			<div class="modal" id="deleteModal${media.id}" tabindex="-1"
				role="dialog" aria-labelledby="deleteModalLabel" aria-hidden="true">
				<div class="modal-dialog" role="document">
					<div class="modal-content">
						<div class="modal-header">
							<h5 class="modal-title" id="deleteModalLabel">确认删除图书</h5>
							<button type="button" class="close" data-dismiss="modal"
								aria-label="Close">
								<span aria-hidden="true">&times;</span>
							</button>
						</div>
						<form action="deleteMedia" method="post">
							<div class="modal-body">
								<p>
									你确定要删除<strong>${media.title}</strong>吗？
								</p>

								<div class="modal-footer">
									<button type="button" class="btn btn-secondary"
										data-dismiss="modal">取消</button>
									<input type="hidden" name="mediaId" value="${media.id}">
									<!-- 确认删除按钮 -->
									<button type="submit" class="btn btn-danger">确认删除</button>
								</div>
							</div>
						</form>
					</div>
				</div>
			</div>
		</c:forEach>

	</div>

	<!-- 引入Bootstrap 4的JavaScript依赖 -->
	<script
		src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
	<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
	<script
		src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"></script>
	<script
		src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>

</html>